<template>
	<view class="">
		<view class="nav-bar">
			<view class="bar-text" @click="goBack">
				<view class="align">

				</view>
				<text>返回</text>
			</view>
		</view>

		<view class="faq-container">

			<view class="faq-item" v-for="(item, index) in faqItems" :key="index" @click="toggleItem(index)">
				<view class="faq-question">
					{{ item.question }}
					<image :src="item.isOpen ? '/static/images/向上箭头.png' : '/static/images/向下箭头.png'" mode="aspectFit">
					</image>
				</view>
				<view class="faq-answer" v-if="item.isOpen">
					{{ item.answer }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				faqItems: [{
						question: '购买运费如何收取？',
						answer: '单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费',
						isOpen: false
					},
					{
						question: '使用什么快递发货？',
						answer: '严选默认使用顺丰快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区（港澳台地区除）',
						isOpen: false
					},
					{
						question: '如何申请退货？',
						answer: '自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同。',
						isOpen: false
					},
					{
						question: '如何开具发票？',
						answer: '1.如需开具普通发票，请在下单时选择“我要开发票”并填写相关信息（APP仅限2.4.0及以',
						isOpen: false
					}
				]
			}
		},
		methods: {
			toggleItem(index) {
				this.faqItems[index].isOpen = !this.faqItems[index].isOpen;
			},
			// 返回
			goBack() {
				uni.reLaunch({
					url: '/pages/serveCenter/serveCenter'
				});
			}
		}
	}
</script>

<style scoped>
	.nav-bar {
		position: relative;
		z-index: 1;
		line-height: 22px;
		text-align: center;
		background-color: #fff;
		display: flex;
		align-items: center;
		height: 46px;
		color: #1989fa;

		.bar-text {
			position: absolute;
			top: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			padding: 0 16px;
			font-size: 14px;
			cursor: pointer;

			.align {
				width: 12px;
				height: 12px;
				border-bottom: 1px solid #1989fa;
				border-left: 1px solid #1989fa;
				transform: rotate(45deg);
				margin-left: 5px;
			}
		}
	}

	.faq-container {
		padding: 10px 20px 20px 20px;
		/* margin: 20px; */
		background-color: white;
	}

	.faq-item {
		border-bottom: 1px solid #eaeaea;
		padding: 15px 0;
	}

	.faq-question {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}

	.faq-question image {
		width: 20px;
		height: 20px;
	}

	.faq-answer {
		margin-top: 10px;
		color: #666;
	}
</style>